<template>
  <view class="trip">
    <view v-if="false">
      <view class="card trip-full" v-for="(item, index) in 3" :key="index">
        <view class="card-clasp" v-if="index === 0">
          <image
            class="card-clasp__icon"
            src="@/static/icon/mine-clasp.png"
          ></image>
          <image
            class="card-clasp__icon"
            src="@/static/icon/mine-clasp.png"
          ></image>
        </view>

        <!--  -->
        <view class="trip-item-header flex align-center">
          <view class="header-item flex column align-center">
            <view class="dot"></view>
            <view class="line"></view>
            <view class="dot"></view>
          </view>
          <view class="header-item flex column align-center">
            <view class="dot"></view>
            <view class="line"></view>
            <view class="dot"></view>
          </view>
        </view>

        <trip-item></trip-item>
      </view>
    </view>

    <!--  -->
    <view
      class="trip-empty flex align-center justify-center card column"
    >
      <view class="card-clasp">
        <image
          class="card-clasp__icon"
          src="@/static/icon/mine-clasp.png"
        ></image>
        <image
          class="card-clasp__icon"
          src="@/static/icon/mine-clasp.png"
        ></image>
      </view>

      <image class="trip-img" src="@/static/empty.png"></image>
      <view class="mgt40 c999 font24 tc">
        <view>您还没有行程安排</view>
        <view>请先报名预约会议</view>
      </view>
    </view>
  </view>
</template>

<script>
import TripItem from "./card-trip-item";
export default {
  components: { TripItem },

  props:{
    login: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(72, 30, 193, 0.1);
  border-radius: 20rpx;
  padding: 20rpx;

  &-clasp {
    position: absolute;
    top: 36rpx;
    left: 50%;
    transform: translate(-50%, -100%);

    &__icon {
      width: 30rpx;
      height: 52rpx;

      &:first-child {
        margin-right: 176rpx;
      }
    }
  }
}
.trip-empty {
  width: 670rpx;
  height: 664rpx;

  .trip-img {
    width: 526rpx;
    height: 332rpx;
  }
}

.trip-full {
  padding: 40rpx;
  &:not(:first-child) {
    margin-top: 40rpx;
  }

  .trip-item-header {
    position: absolute;
    top: 6rpx;
    left: 50%;
    transform: translate(-50%, -100%);

    .header-item {
      &:not(:last-child) {
        margin-right: 176rpx;
      }

      .dot {
        width: 6rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: #dedede;
      }

      .line {
        height: 28rpx;
        width: 0;
        border-left: 2rpx dashed #999999;
      }
    }
  }

  &:first-child {
    .trip-item-header {
      display: none;
    }
  }
}
</style>
